iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
0
Modern Web

網頁技術學習心得系列 第 26

Webpack 筆記二(webpack 設定檔)

  • 分享至 

  • xImage
  •  

webpack 設定檔:

首先要在目錄裡面建立 webpack.config.js

// webpack 預設檔

const path = require('path');

module.exports = {
  mode: 'development',
  // mode 預設 production 會把 code 壓縮,可以設定 development 把 code 編譯的看得懂。
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Code:

//index.html
<!DOCTYPE html>
<html>
<head>
    <script src='dist/main.js'></script>
</head>
<body></body>
</html>

// src/utilis.js
const utilis = {
    first: function(str) {
        return str[0]
    }
}
module.exports =  utilis

// src/index.js
const utilis = require('./utilis.js');

const result = utilis.first('rockwang')

console.log(result)

Log:

webpack 可以將 npm 可以下載的 module 都打包

我可以在 npm 上面下載任何 module,webpack 都可以將它打包,在瀏覽器上一樣可以執行。

檔案大小問題

引入多個 module 可能導致 main.js 檔案過大,因為會將 module 的程式碼整個匯入。

壓縮檔案

webpack.config.js 裡面可以設定,mode: production //預設,就可以將檔案可以在壓縮小一點。

loader

webpack 提供不同的 loader,可以匯入不同的檔案類型,例如:.css、.sass...等等。

CLI 指令

webpack 查找電腦裡的指定,會執行不了。
npx webpack 查找此資料夾裡面的指令,可以執行。


上一篇
Webpack 筆記一(為什麼需要 Webpack)
下一篇
Webpack 筆記三(webpack loader dev server)
系列文
網頁技術學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言